<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label=" 门店名称：">
            <el-input v-model="form.storeName" placeholder="请输入店名" @change="loadStoreList"></el-input>
          </el-form-item>
          <el-badge :value="applyWaitSize" class="item">
            <el-button size="small" @click="openStoreApplyWindow">门店申请</el-button>
          </el-badge>
        </el-form>
      </el-col>
    </el-row>
    <!-- 门店总览 -->
    <el-row style="margin-top: 20px;">
      <el-col :span="18" :offset="3">
        <el-table :data="storeDtos" style="width: 100%">
          <el-table-column prop="storeId" label="门店编号" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="storeName" label="门店名称" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="storeAddress" label="门店地址" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="storeAdminName" label="门店管理员" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="storeState" label="门店状态" width="190">
            <template slot-scope="scope">
              {{ scope.row.storeState==0?"正常":scope.row.storeState==1?"关店":scope.row.storeState==2?"已删除":"异常状态"}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" label-align="center">
            <template slot-scope="scope">
              <el-button @click="openChangeAddressNameWindow(scope.row)" type="text"
                v-if="scope.row.storeState==0||scope.row.storeState==1">修改地址</el-button>
              <el-button @click="openChangeStoreAdminWindow(scope.row)" type="text"
                v-if="scope.row.storeState==0||scope.row.storeState==1">修改负责人</el-button>
              <el-button @click="closeStore(scope.row)" type="text" v-if="scope.row.storeState==0">关闭店铺</el-button>
              <el-button @click="openStore(scope.row)" type="text" v-if="scope.row.storeState==1">启用店铺</el-button>
              <el-button @click="deleteStoreState(scope.row)" type="text"
                v-if="scope.row.storeState==1">删除店铺</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--分页-->
    <el-pagination @size-change=" handleSizeChange" @current-change="handleCurrentChange" :current-page="form.pageNum"
      :page-sizes="[3,4,5]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 申请处理窗口 -->
    <el-dialog title="门店新增申请" :visible.sync="storeApplyWindow">
      <!-- 待处理申请总览 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="待处理申请" name="first">
          <el-row>
            <el-col :span="24">
              <el-form :inline="true">
                <el-form-item label=" 门店名称：">
                  <el-input v-model="applyForm.storeName" placeholder="请输入店名" @change="loadWaitStoreApply"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-table :data="applys" stripe width="500px">
            <el-table-column prop="storeApplyId" label="申请编号" width="80px">
            </el-table-column>
            <el-table-column label="门店证件" width="130px">
              <template slot-scope="scope">
                <el-image style="width: 30px; height: 30px" :src="scope.row.storeImage"
                  :preview-src-list="[scope.row.storeImage]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="storeName" label="门店名称" width="210px">
            </el-table-column>

            <el-table-column prop="storeAddress" label="门店地址" width="210px">
            </el-table-column>

            <el-table-column prop="remarks" label="备注" width="210px">
            </el-table-column>
            <el-table-column prop="applyState" label="申请状态" width="210px">
              <template slot-scope="scope">
                {{ scope.row.applyState==0?"0待审核":scope.row.applyState==1?"1审核通过":scope.row.applyState==2?"驳回":"异常状态"}}
              </template>
            </el-table-column>
            <el-table-column prop="storeAdminName" label="申请门店管理员姓名" width="210px">
            </el-table-column>
            <el-table-column prop="createTime" label="申请时间" width="210px">
            </el-table-column>
            <el-table-column label="操作" width="200" align="center" label-align="center">
              <template slot-scope="scope">
                <el-button @click="allow(scope.row)" type="text">通过</el-button>
                <el-button @click="notAllow(scope.row)" type="text">驳回</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
              :current-page="applyForm.pageNum" :page-sizes="[2, 3, 4, 5]" :page-size="applyForm.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="applysTotal">
            </el-pagination>
          </div>
          <!-- 申请驳回信息窗口 -->
          <el-dialog width="30%" title="请填写驳回原因" :visible.sync="notAllowWindow" append-to-body>
            <el-input v-model="notAllowApply.reason" placeholder="请输入原因"></el-input>
            <div slot="footer" class="dialog-footer">
              <el-button @click="notAllowWindow = false">取 消</el-button>
              <el-button type="primary" @click="sureNotAllow()">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <!-- 已处理申请总览 -->
        <el-tab-pane label="已处理申请" name="third">
          <el-row>
            <el-col :span="24">
              <el-form :inline="true">
                <el-form-item label=" 门店名称：">
                  <el-input v-model="dealedApplyForm.storeName" placeholder="请输入店名"
                    @change="loadDealdedStoreApply"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-table :data="dealedApplys" stripe width="500px">
            <el-table-column prop="storeApplyId" label="申请编号" width="80px">
            </el-table-column>
            <el-table-column label="门店证件" width="130px">
              <template slot-scope="scope">
                <el-image style="width: 30px; height: 30px" :src="scope.row.storeImage"
                  :preview-src-list="[scope.row.storeImage]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="storeName" label="门店名称" width="210px">
            </el-table-column>

            <el-table-column prop="storeAddress" label="门店地址" width="210px">
            </el-table-column>

            <el-table-column prop="remarks" label="备注" width="210px">
            </el-table-column>
            <el-table-column prop="applyState" label="申请状态" width="210px">
              <template slot-scope="scope">
                {{ scope.row.applyState==0?"待审核":scope.row.applyState==1?"审核通过":scope.row.applyState==2?"驳回":"异常状态"}}
              </template>
            </el-table-column>
            <el-table-column prop="storeAdminName" label="申请门店管理员姓名" width="210px">
            </el-table-column>
            <el-table-column prop="createTime" label="申请时间" width="210px">
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
              :current-page="dealedApplyForm.pageNum" :page-sizes="[2, 3, 4, 5]" :page-size="dealedApplyForm.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="dealedApplysTotal">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="storeApplyWindow = false">取 消</el-button>
        <el-button type="primary" @click="">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 地址信息修改窗口 -->
    <el-dialog width="30%" title="请填写新地址" :visible.sync="changeAddressWindow">
      <el-input v-model="changeAddress.address" placeholder="请输入新地址"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" changeAddressWindow= false">取 消</el-button>
        <el-button type="primary" @click="sureAddressChange()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 负责人信息修改窗口 -->
    <el-dialog width="30%" title="请选择负责人" :visible.sync="changeStoreAdminWindow">
      <el-select v-model="storeAdminId" placeholder="请选择">
        <el-option v-for="storeAdminDto in options" :key="storeAdminDto.storeAdminId"
          :label="storeAdminDto.storeAdminName" :value="storeAdminDto.storeAdminId">
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeStoreAdminWindow=false ">取 消</el-button>
        <el-button type="primary" @click="sureChangeStoreAdmin()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "store",
    data() {
      return {
        applyWaitSize: null, //展示未处理申请数量
        storeDtos: [], //店铺总览数据
        total: 0, //店铺总数
        applysTotal: 0, //未处理申请总数
        dealedApplysTotal: 0, //已处理申请总数
        form: {
          storeName: "",
          pageSize: 3,
          pageNum: 1
        }, //店铺筛选分页条件
        applyForm: { //未处理申请筛选分页条件
          storeName: "",
          pageSize: 3,
          pageNum: 1
        },
        dealedApplyForm: { //已处理申请筛选分页条件
          storeName: "",
          pageSize: 3,
          pageNum: 1
        },
        notAllowApply: { //驳回申请数据
          storeApplyId: "",
          reason: ""
        },
        applys: [], //未处理申请总览
        dealedApplys: [], //已处理申请总览
        storeApplyWindow: false, //店铺申请窗口
        notAllowWindow: false, //驳回申请窗口
        activeName: "first", //申请数据切换滑窗
        changeAddressWindow: false, //修改地址信息窗口
        changeAddress: {
          address: "",
          storeId: ""
        }, //修改的新地址信息
        changeStoreAdminWindow: false, //修改负责人窗口
        options: [], //可选负责人
        storeAdminId: "",
        storeId: "",
      }
    },
    methods: {
      loadStoreList() {
        //加载所有未删除的店铺信息
        this.$http.post("/person/store/storeList.api", this.form).then(resp => {
          if (resp.data.code = 200) {
            console.log(resp)
            this.storeDtos = resp.data.data.records
            this.total = resp.data.data.total
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      handleSizeChange(val) {
        this.form.pageSize = val
        this.loadStoreList()
      },
      handleCurrentChange(val) {
        this.form.pageNum = val
        this.loadStoreList()
      },
      openStoreApplyWindow() {
        //打开门店申请窗口
        this.storeApplyWindow = true
        this.loadWaitStoreApply()
        this.loadDealdedStoreApply()
      },
      loadWaitStoreApply() {
        //加载所有未处理申请
        this.$http.post("/person/storeApply/storeApplyListStateNormal.api", this.applyForm).then(resp => {
          if (resp.data.code == 200) {
            this.applys = resp.data.data.records
            this.applysTotal = resp.data.data.total
            if (this.applysTotal == 0) {
              this.applyWaitSize = null
            } else {
              this.applyWaitSize = this.applysTotal
            }
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      loadDealdedStoreApply() {
        //加载所有已处理申请
        this.$http.post("/person/storeApply/storeApplyListStateDealed.api", this.dealedApplyForm).then(resp => {
          if (resp.data.code == 200) {
            this.dealedApplysTotal = resp.data.data.total
            this.dealedApplys = resp.data.data.records
          }
        })
      },
      handleSizeChange1(val) {
        this.applyForm.pageSize = val
        this.loadWaitStoreApply()
      },
      handleCurrentChange1(val) {
        this.applyForm.pageNum = val
        this.loadWaitStoreApply()
      },
      handleSizeChange2(val) {
        this.dealedApplyForm.pageSize = val
        this.loadDealdedStoreApply()
      },
      handleCurrentChange2(val) {
        this.dealedApplyForm.pageNum = val
        this.loadDealdedStoreApply()
      },
      allow(apply) {
        //通过门店申请
        this.$http.get("/person/storeApply/allowStoreApply.api", {
          params: {
            storeApplyId: apply.storeApplyId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.loadWaitStoreApply()
            this.loadDealdedStoreApply()
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      notAllow(apply) {
        //打开驳回申请信息窗口
        this.notAllowWindow = true
        this.notAllowApply.storeApplyId = apply.storeApplyId
        this.notAllowApply.reason = ""
      },
      sureNotAllow() {
        //驳回申请
        this.$http.post("/person/storeApply/rejectStoreApply.api", this.notAllowApply).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.notAllowWindow = false
            this.loadWaitStoreApply()
            this.loadDealdedStoreApply()
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      closeStore(store) {
        //关闭店铺
        this.$http.get("/person/store/changeStoreState.c", {
          params: {
            storeId: store.storeId,
            changeType: "关闭"
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.loadStoreList()
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      openStore(store) {
        //启用店铺
        this.$http.get("/person/store/changeStoreState.c", {
          params: {
            storeId: store.storeId,
            changeType: "启用"
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.loadStoreList()
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      deleteStoreState(store) {
        //删除店铺
        this.$http.get("/person/store/changeStoreState.c", {
          params: {
            storeId: store.storeId,
            changeType: "删除"
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.loadStoreList()
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      openChangeAddressNameWindow(store) {
        //打开修改地址信息窗口
        this.changeAddressWindow = true
        this.changeAddress.storeAddress = store.storeAddress
        this.changeAddress.storeId = store.storeId
      },
      sureAddressChange() {
        //确认修改地址信息
        this.$http.get("/person/store/StoreChangeInfo.c", {
          params: {
            storeId: this.changeAddress.storeId,
            storeAddress: this.changeAddress.address
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.loadStoreList()
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },
      loadAllStoreAdmin() {
        //获取所有可选门店管理员
        this.$http.get("/person/storeAdmin/listStoreAdminAllowChooseStore.api").then(resp => {
          if (resp.data.code == 200) {
            console.log(resp)
            this.options = resp.data.data
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }

        })
      },
      openChangeStoreAdminWindow(store) {
        this.loadAllStoreAdmin()
        this.changeStoreAdminWindow = true
        this.storeId = store.storeId
      },
      sureChangeStoreAdmin() {
        this.$http.get("/person/store/storeChargeAdminChange.api", {
          params: {
            storeId: this.storeId,
            storeAdminId: this.storeAdminId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.storeAdminId = ""
            this.storeId = ""
            this.loadStoreList()
            this.changeStoreAdminWindow = false
          } else {
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }

        })
      }
    },
    created() {
      this.loadStoreList()
      this.loadWaitStoreApply()
      this.loadDealdedStoreApply()
    }
  }
</script>

<style>
</style>
